<template>
  <view>
    <image src="/static/login-bg.jpg" style="width: 100%;height: 500rpx;position: absolute" mode="center"/>
    <uv-gap height="180"></uv-gap>
    <view class="header">
      <view>您好，</view>
      <view style="margin-top: 20rpx">欢迎使用XXX</view>
    </view>
    <uv-gap height="80"></uv-gap>
    <view class="login-form">
      <view class="login-password">
        <view>
          <uv-text text="手机号" :bold="true" :size="34" color="#000"></uv-text>
          <view class="input">
            <uv-input v-model="formData.username" placeholder="请输入您的账号" color="#606266" fontSize="30rpx" border="none" placeholderClass="input-placeholder"/>
          </view>
        </view>
        <view style="margin-top: 40rpx" v-show="currentPage==='pwd-login'">
          <uv-text text="密码" :bold="true" :size="34" color="#000"></uv-text>
          <view class="input">
            <uv-input v-model="formData.password" type="password" placeholder="请输入您的密码" fontSize="30rpx" color="#606266" border="none" placeholderClass="input-placeholder"/>
          </view>
        </view>
        <view v-show="currentPage==='retrieve-pwd'">
          <view style="margin-top: 40rpx">
            <uv-text text="验证码" :bold="true" :size="34" color="#000"></uv-text>
            <view class="input">
              <uv-input v-model="formData.vCode" placeholder="请输入验证码" fontSize="30rpx" color="#606266" border="none" placeholderClass="input-placeholder">
                <template v-slot:suffix>
                  <uv-code ref="uCode" @change="codeChange" seconds="120" changeText="X秒后重新获取"></uv-code>
                  <uv-button @click="getCode" :text="tips" type="primary" size="small" :disabled="$refs.uCode && !$refs.uCode.canGetCode"></uv-button>
                </template>
              </uv-input>
            </view>
          </view>
          <view style="margin-top: 40rpx">
            <uv-text text="密码" :bold="true" :size="34" color="#000"></uv-text>
            <view class="input">
              <uv-input v-model="formData.rePassword" placeholder="请输入您的密码" type="password" fontSize="30rpx" color="#606266" border="none" placeholderClass="input-placeholder"/>
            </view>
          </view>
          <view style="margin-top: 40rpx">
            <uv-text text="确认密码" :bold="true" :size="34" color="#000"></uv-text>
            <view class="input">
              <uv-input v-model="formData.notarizePassword" placeholder="请输入您的确认密码" type="password" fontSize="30rpx" color="#606266" border="none" placeholderClass="input-placeholder"/>
            </view>
          </view>
        </view>
        <view style="margin-top: 40rpx;display: flex;justify-content: right;margin-right: 20rpx">
          <uv-icon v-show="currentPage==='pwd-login'" name="info-circle" labelSize="26rpx" label="找回密码" labelColor="#606266" labelPos="left" space="4rpx" @click="retrievePasswordClick"></uv-icon>
          <uv-icon v-show="currentPage==='retrieve-pwd'" labelSize="26rpx" label="密码登录" labelColor="#606266" labelPos="left" space="4rpx" @click="currentPage='pwd-login'"></uv-icon>
        </view>
        <uv-gap height="160"></uv-gap>
        <uv-button type="primary" :hairline="true" text="登 录" shape="circle" customTextStyle="font-size:32rpx" v-show="currentPage==='pwd-login'" @click="passwordLoginClick"></uv-button>
        <uv-button type="primary" :hairline="true" text="重 置" shape="circle" customTextStyle="font-size:32rpx" v-show="currentPage==='retrieve-pwd'" @click="reSetPassword"></uv-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: "pwd-login",
      tips: '',
      formData: {
        username: '',
        password: '',
        vCode: '',
        rePassword: '',
        notarizePassword: '',
      }
    };
  }, methods: {
    retrievePasswordClick() {
      this.currentPage = 'retrieve-pwd'
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          uni.$uv.toast('验证码已发送');
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$uv.toast('倒计时结束后再发送');
      }
    },
    reSetPassword() {
      uni.$uv.toast('重置密码成功');
    },
    passwordLoginClick() {
      uni.$uv.toast('登录成功');
      setTimeout(() => {
        uni.switchTab({url: '/user/index/index'})
      }, 400);

    }
  },
}
</script>
<style lang="scss">
page {
  background-color: #ffffff
}</style>
<style lang="scss" scoped>
.header {
  position: relative;
  //top: -300rpx;
  left: 60rpx;
  font-size: 40rpx;
  color: #fff;
  font-weight: bolder;
}

.login-form {
  position: relative;
  //top: -240rpx;
  padding: 60rpx;
  background-color: #fff;
  border-radius: 80rpx;

  .input-placeholder {
    font-size: 32rpx;
    color: #c0c4cc;
  }

  .login-password {
    padding-top: 20rpx;

    .label {
      font-weight: bolder;
    }

    .input {
      border-bottom: 1px solid #f4f4f5;
      padding: 20rpx 0;
    }
  }
}

</style>
